
<script>
import {formatTime} from '@tools/time'
import { mapState } from 'vuex'
import Vue from 'vue'
export default {
	name: 'statusBar',
	computed: {
		...mapState(['gold', 'userInfo', 'topupAuth', 'tradeTime'])
	},
	methods: {
		turn() {
			MessageBox.confirm('', {
				title: '交易类型转换',
				message: '确认要转' + (this.gold ? '实盘?' : '模拟盘?'),
				confirmButtonText: '确定',
				confirmButtonClass: 'red'
			}).then(() => {
				this.$store.commit('setGold', !this.gold)
			})
		},
		getTopupAuth() {
			if (Object.keys(this.topupAuth).length === 0) {
				this.$router.push({
					path: '/login'
				})
			} else if (this.topupAuth.identify === 1 && !this.topupAuth.cardState) {
				MessageBox.confirm('', {
					title: '充值',
					message: '为了您的资金安全，请前去绑卡',
					confirmButtonText: '去绑定',
					confirmButtonClass: 'red'
				}).then(() => {
					this.$router.push({
						path: '/account/bindbank'
					})
				})
			} else {
				window.location.href = './account/paySelect.html'
			}
		}
	},
	render() {
		const { gold, userInfo } = this
		const exchangeStatus = this.tradeTime
		const isLogin = userInfo.userPhone
        const formatMoney = Vue.filter('formatMoney')
        const USERNAME = cookie.getCookie('USERNAME');
        const PSW = cookie.getCookie('PSW');
		return (
			<div class="statusBar">
				{isLogin ? (
					<div class="lh25 fs14 flex">
						<span class="flex1 tl" v-show="!gold" onClick={this.turn.bind(this)}>
							<i class="turn">{gold ? '转实盘' : '转模拟盘'}</i>
						</span>
						<span class="flex1 tc">
							{gold ? '金币 ' : '余额 '} {gold ? userInfo.scoreUsable : userInfo.moneyUsable | formatMoney()}
						</span>
						<span class="flex1 tr" v-show="!gold">
							<a
								class="topup"
								href="javascript:;"
								onClick={() => {
									if (gold) {
										this.$store.dispatch('getScore')
									} else {
										this.getTopupAuth()
									}
								}}
							>
								{gold ? '领取金币' : '充值'}
							</a>
						</span>
					</div>
				) : (
                    <p class="lh40 fs16 user">
                        <router-link class="white log lh30 tc" to={"/login"}>
							登录
						</router-link>
						<router-link class="white reg lh30 tc ml20" to={(!USERNAME && !PSW)?"/activity/tuiguangreg?abc=1":"/register"}>
							{(!USERNAME && !PSW)?'开户领钱':'注册'}
						</router-link>
					</p>
				)}
				<div class="lh40">
					<em class={`on white br2 mr5 ${exchangeStatus ? 'bgred' : 'bggray'}`}>{exchangeStatus ? '交易中 ' : '已休市 '}</em>
					<em>{exchangeStatus ? '持仓至' : '下次交易时间'}</em>
					<em>{exchangeStatus ? formatTime(this.tradeTime.inventoryNextTime) : this.tradeTime.nextTime}</em>
				</div>
			</div>
		)
	}
}
</script>
<style scoped lang='scss'>
.statusBar{
    padding: rem(20px) rem(10px);
}
.timeToggle {
	position: relative;
}

.timeToggle::after {
	content: '';
	width: 0;
	height: 0;
	border: rem(6px) solid transparent;
	border-bottom-color: #feaa37;
	position: absolute;
	bottom: rem(-5px);
	right: rem(-6px);
	transform: rotate(135deg);
}

.timeToggle div {
	position: absolute;
	top: rem(30px);
	min-width: rem(60px);
	background-color: #fff;
	border-radius: rem(2px);
	box-shadow: 0 0 rem(4px) rgba(0, 0, 0, 0.3);
	font-size: rem(14px);
	line-height: rem(30px);
	white-space: nowrap;
	z-index: 99;
}

.timeToggle div p {
	border-bottom: 1px solid #e2e2e2;
}

.timeToggle div p:last-child {
	border-bottom: 0 none;
}

.turn {
	display: inline-block;
	border: 1px solid #f96d46;
	color: #f96d46;
	border-radius: rem(2px);
	padding-left: rem(5px);
	padding-right: rem(5px);
	height: rem(23px);
}

.topup {
	background-color: #f96d46;
	color: #fff;
	display: inline-block;
	padding-left: rem(5px);
	padding-right: rem(5px);
	border-radius: rem(2px);
}

.toggle {
	line-height: rem(30px);
	margin-top: rem(10px);
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

.toggle span {
	border: 1px solid #000;
	line-height: rem(28px);
	width: 50%;
	box-sizing: border-box;
}

.toggle span:nth-child(1) {
	border-right: 1px solid #000;
	border-top-left-radius: rem(2px);
	border-bottom-left-radius: rem(2px);
}

.toggle span:nth-child(2) {
	border-top-right-radius: rem(2px);
	border-bottom-right-radius: rem(2px);
}

.toggle span.select {
	color: #fff;
	border-color: #fff;
}
.user .log {
	width: rem(98px);
	background: linear-gradient(90deg, #ffba00, #ff9000);
	border-radius: rem(4px);
	display: inline-block;
}

.user .reg {
	width: rem(98px);
	border-radius: rem(4px);
	display: inline-block;
	background: linear-gradient(90deg, #ff6c47, #ff3c4b);
}

</style>